 <template>
  <div>

    <!-- 模糊查询 -->
    <div>
      <el-form :inline="true" :model="studentForm" :rules="rules" ref="studentForm" class="demo-form-inline">
      <el-form-item label="学生ID" prop="studentId">
        <el-input v-model="studentForm.studentId" placeholder="学生ID"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('studentForm')">查询</el-button>
      </el-form-item>
    </el-form>
    </div>

    <el-table
    ref="multipleTable"
     :data="tableData.list"
     style="width: 100%"
     stript
     tooltip-effect="dark"
      @selection-change="handleSelectionChange">
      <el-table-column
      type="selection"
      prop="studentId"
      width="55">
    </el-table-column>
     <el-table-column
       prop="studentIdcard"
       label="身份证"
       >
     </el-table-column>
     <el-table-column
       prop="studentName"
       label="姓名"
       >
     </el-table-column>
     <el-table-column
       prop="major.majorName"
       label="所报专业"
       >
       show-overflow-tooltip>
     </el-table-column>

     <el-table-column
       prop="studentId"
       label="查看详情"
       >

        <template slot-scope="scope">
         <el-dialog title="缴费详情" :visible.sync="dialogFormVisible">
           <div style="margin: 10px;"></div>

              <el-form :label-position="labelPosition" label-width="80px" :model="gridData">
                <el-form-item label="'姓名:">
                  <el-input v-model="gridData.studentName" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="专业:">
                  <el-input v-model="gridData.major.majorName" :disabled="true"> </el-input>
                </el-form-item>
               <el-form-item label="缴费:">
                 <el-input v-model="gridData.studentFirstMoney" :disabled="true"></el-input>
               </el-form-item>
               <el-form-item label="缴费时间:">
                 <el-input v-model="gridData.studentFirstMoneyTime" :disabled="true"></el-input>
               </el-form-item>

               <el-form-item label="是否毕业:">
                <el-input v-model="gridData.studentGraduation" :disabled="true"></el-input>
               </el-form-item>


              </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="dialogFormVisible = false" >确 定</el-button>
            </div>
          </el-dialog>

         <el-button type="primary" icon="el-icon-info" size="small" @click="dialogFormVisible = true" @click.native="showDetail(scope.row.studentId)" ></el-button>
      </template>

     </el-table-column>

     <el-table-column
      prop="studentSecondMoney"

       label="应交金额"
       >
     </el-table-column>
     <el-table-column
       prop="studentFirstMoney"
       label="实缴金额"
       >
     </el-table-column>
     </el-table>

     <!-- 分页 -->
     <div>
       <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page.sync="currentPage3"
             :page-size="tableData.pageSize"
             layout="total, prev, pager, next, jumper"
             :total="tableData.total">
         </el-pagination>
     </div>




  </div>
</template>
<style>
.el-table th{
  text-align: center;
}
</style>

<script>
import {queryMoney} from '@/axios/api'
import {formatDate} from '@/common/js/date'
  export default {
    data() {
      return {
        tableData: {},
        currentPage3: 1,
         multipleSelection: [],
         gridData: {major:{}},
        dialogTableVisible: false,
        dialogFormVisible: false,
        labelPosition: 'right',
        visible2: false,
        pageIndex: 1,
        studentForm: {
          studentId: '',
        },
        rules: {
         studentId: [
           // { required: true, message: '请输入查询ID', trigger: 'blur' },
           { pattern: /^[0-9]+$/, message: '请输入正整数', trigger: 'blur'}
           // { min: 3, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
         ]
      }
      }
    },
    methods: {
      /**
       * 全选
       */
      toggleSelection(rows) {

        if (rows) {
            rows.forEach(row => {
                  this.$refs.multipleTable.toggleRowSelection(row);
                });
              } else {
                this.$refs.multipleTable.clearSelection();
              }
            },


            handleSelectionChange(val) {
              this.multipleSelection = val;
            },
            /**
             * 模糊查询
             */
            submitForm(formName) {
              this.$refs[formName].validate((valid) => {
                if (valid) {
                  let params = {studentId:this.studentForm.studentId,pageIndex:this.pageIndex};
                  console.log("模糊查询:"+params);
                  queryMoney(params).then(res =>{
                    this.tableData = res.resData
                  });
                } else {
                  console.log('error submit!!');
                  return false;
                }
              });
            },
            /**
             * 查看详情
             */
            showDetail(val) {

              //alert(val);
              let params = {studentId:val,pageIndex:this.pageIndex};
              console.log("查看详情:"+params);
              queryMoney(params).then(res =>{
                  console.log(res.resData);
                  this.gridData = res.resData.list[0];
                  this.gridData.studentFirstMoneyTime=formatDate(new Date(this.gridData.studentFirstMoneyTime),"yyyy-MM-dd hh:mm:ss");
              })
            },
    /**
     * 分页
    */
  handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        let params = {studentId:this.studentForm.studentId,pageIndex:val};
        queryMoney(params).then(res =>{
          console.log(res);
        this.tableData =  res.resData;
        // this.pay = res.resData.studentFirstMoney + res.resData.studentSecondMoney;

        })
      },

  },
  mounted(){
    this.handleCurrentChange(this.pageIndex)
  }
}

</script>
